<template>
	<div class="blogs-detail" style="padding: 25px">
		<ul>
			<li>{{ blogsOption.title }}</li>
			<li>{{ blogsOption.content }}</li>
			<el-divider></el-divider>
		</ul>

		<!-- 最大的评论框 -->
		<el-form :model="form">
			<el-form-item>
				<el-avatar size="large" :src="form.avatar"></el-avatar>
			</el-form-item>

			<el-form-item label="评论内容">
				<el-input
					@focus="handleFocus"
					ref="textArea"
					type="textarea"
					v-model="form.content"
				></el-input>
			</el-form-item>

			<el-form-item>
				<el-button @click="handleAddCommentsItem">提交评论</el-button>
			</el-form-item>
		</el-form>
		<!-- 一级评论和二级评论显示区域 -->
		<div class="all-comments-container">
			<ul
				class="comments-list"
				v-for="item in commentsList"
				:key="item.commentsId"
			>
				<li>
					<el-avatar size="large" :src="circleUrl"></el-avatar>
				</li>
				<li>
					<span>{{ item.sendId }}</span>
					<span style="margin-left: 20px">{{ item.createTime }}</span>
				</li>
				<li>
					{{ item.content }}
					<span
						class="reply"
						size="small"
						type="danger"
						@click="onReplyClick(item)"
						>回复</span
					>
				</li>
				<div v-if="item.showReply">
					<Comments @onClickParent="handleToParent" :item="item" isReply="1" />
				</div>
				<el-divider></el-divider>
				<div
					style="margin-left: 30px; background: #eee"
					class="reply-container"
				>
					<!-- 二级评论循环区域 -->
					<template v-for="v in item.children">
						<span :key="v.id">
							{{ v.sendId }} 这个人回复 {{ v.acceptId }} : 说了以下内容：
							{{ v.content
							}}<span
								class="reply"
								size="small"
								type="danger"
								@click="replyClick(item, v)"
								>回复</span
							>
							<el-divider></el-divider>
							<div v-if="v.show">
								<Comments
									@onClickParent="handleToParent"
									:item="v"
									isReply="2"
								/>
							</div>
						</span>
					</template>
				</div>
			</ul>
			<el-divider></el-divider>
		</div>

		<!-- 弹出框登陆 -->
		<el-dialog title="登陆弹出框" :visible.sync="showLoginDialog" width="65%">
			<el-form
				ref="ruleForm"
				:rules="rules"
				:model="formLogin"
				label-width="50px"
			>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="formLogin.email"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="text" v-model="formLogin.password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="handleLoginClick('ruleForm')">登陆</el-button>
					<el-button>取消登陆</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import axios from 'axios'
import Comments from './components/comments.vue'
import { debounce } from 'lodash'
import { chatArr } from './data'
export default {
	components: { Comments },
	data() {
		return {
			reply: false,
			chatArr,
			// password: '密码数据',
			rules: {
				email: [
					{ required: true, message: '请输入正确的邮箱', trigger: 'blur' }
				],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			},
			formLogin: {
				email: '',
				pasword: ''
			},
			showLoginDialog: false,
			form: {
				avatar: '',
				content: ''
			},
			blogsId: '',
			blogsOption: {},
			commentsList: [],
			circleUrl:
				'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
		}
	},
	async created() {
		// 拿到博客的id
		this.blogsId = this.$route.params.blogsId
		await this.getDetail()
		await this.getCommentsList()
	},
	computed: {},
	watch: {},
	mounted() {
		// 直接操作dom放在这个里面
		this.$nextTick(() => {
			console.log(this.$refs.textArea)
			// this.$refs.textArea
		})
	},
	/**
	 *
	 * 1. 进入页面。获取两个接口。（详情接口 评论接口）
	 * 2. 登陆 （校验 登陆接口）
	 * 3. 添加一级评论  （一级评论内容接口）
	 * 4. 显示一级评论框， （二级评论接口）
	 * 5. 显示二级评论框 （comments 二级评论接口）
	 * 6. 子传父 ，重修获取评论数据
	 *
	 */
	methods: {
		// 1. 详情接口
		async getDetail() {
			const result = await this.$http.get(`/api/blogsDetail`, {
				params: { blogsId: this.blogsId }
			})
			console.log('result:', result)
			this.blogsOption = result.data
		},
		// 2. 获取评论列表接口
		async getCommentsList() {
			console.log('博客列表id', this.blogsId, '--------')
			const result = await this.$http.get('/api/comments', {
				params: { blogsId: this.blogsId }
			})
			// 获取评论数据之后，给这个数据添加一个状态，这个状态，用来控制评论组件的现实隐藏
			result.result.forEach((item) => {
				item.showReply = false
			})
			this.commentsList = result.result
			console.log('commentsList', this.commentsList, 'commentsList-----')
		},

		// 3. 出现登陆弹出框；判断登陆状态；评论框的聚焦事件
		handleFocus() {
			console.log('判断用户是否登陆')
			const token = window.localStorage.getItem('token')
			console.log(token, 'token')
			if (token === null || token === 'undefined') {
				// 用户未登陆，让登陆弹出框显示
				this.showLoginDialog = true
			}
		},
		// 4. 登陆校验
		handleLoginClick(formName) {
			// 校验邮箱是否正确 调用登陆接口
			this.$refs[formName].validate((valid) => {
				console.log(valid, 'valid')
				if (valid) {
					// 登陆接口
					this.$http.post('/api/login-mouth', this.formLogin).then((res) => {
						console.log(res, 'res')
						window.localStorage.setItem('token', res.token)
						// 登陆成功之后，关闭弹出框
						this.showLoginDialog = false
					})
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		// 5. 添加一级评论
		async handleAddCommentsItem() {
			const content = {
				blogsId: this.blogsId,
				content: this.form.content
			}
			const result = await this.$http.post('/api/addComments', content)
			console.log(result, 'result')
			// 请求新的列表数据渲染
			this.getCommentsList()
		},
		// 6. 点击了刚才添加的一级评论的回复按钮，显示一级评论框，
		onReplyClick(item) {
			this.commentsList.forEach((v) => {
				v.showReply = false
			})
			item.showReply = true
		},
		//  7. 显示二级评论框， 用到了一个组件
		replyClick(item, v) {
			// 给二级评论添加了一个开关，控制评论框显示隐藏
			item.children.forEach((element) => {
				element.show = false
			})
			v.show = true
		},

		// 8. 处理子传父事件 方便告诉，父组件，子组件已经评论结束了，你可以重新请求评论接口，再渲染页面
		handleToParent(props) {
			// 用户评论完，重新请求评论接口，渲染所有的评论
			this.getCommentsList()
		}
	}
}
</script>

<style>
.comments-list {
	padding: 5px 10px;
	margin: 5px;
	border: 1px solid #ccc;
}
.reply {
	cursor: pointer;
	border: 1px solid #ccc;
	padding: 3px 5px;
	margin: 5px;
	text-align: center;
	line-height: 1;
	user-select: none;
}
</style>
